<template>
	<view>
		<text class="title">请填写你的领奖信息</text>
		<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
			<u-form-item label-width="75" label="姓名:" prop="userInfo.winner_name" borderBottom ref="name">
				<u--input v-model="model1.userInfo.winner_name" border="none" placeholder="请填写姓名"></u--input>
			</u-form-item>
			<u-form-item label-width="75" label="手机号:" prop="userInfo.winner_phone_number" borderBottom
				ref="winner_phone_number">
				<u--input v-model="model1.userInfo.winner_phone_number" border="none" placeholder="请填写手机号"></u--input>
			</u-form-item>
			<u-form-item label-width="75" label="收货地址:" prop="userInfo.winner_delivery_address" borderBottom
				ref="winner_delivery_address">
				<u--input v-model="model1.userInfo.winner_delivery_address" border="none"
					placeholder="请填写收货地址"></u--input>
			</u-form-item>
		</u--form>
		<view class="formButton">
			<u-button type="error" text="重置" @click="reset"></u-button>
			<u-button type="primary" text="提交" @click="submit"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				model1: {
					userInfo: {
						fwb_prize_draw_info_id: this.$route.query.id,
						winner_name: '',
						winner_phone_number: '',
						winner_delivery_address: '',
					},
				},
				rules: {
					'userInfo.winner_name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.winner_phone_number': {
						type: 'string',
						required: true,
						validator: (rule, value, callback) => {
							if (value != null && value != undefined) {
								return this.$u.test.mobile(value);
							}
						},
						message: '请正确填写手机号码',
						trigger: ['blur', 'change']
					},
					'userInfo.winner_delivery_address': {
						type: 'string',
						required: true,
						message: '请填写收货地址',
						trigger: ['blur', 'change']
					},
				},
				switchVal: false,
			};
		},
		onUnload() {
			console.log("onUnload..");
			uni.navigateTo({
				url: "/pages/mytable/fwb_turnable_lottery/fwb_receive_info"
			})
		},
		mounted() {
			let backButton = document.getElementsByClassName('uni-page-head-hd')[0];
			backButton.style.display = 'none';
		},
		methods: {
			reset() {
				const validateList = ['winner_name', 'winner_phone_number', 'winner_delivery_address']
				this.$refs.uForm.resetFields()
				this.$refs.uForm.clearValidate()
				setTimeout(() => {
					this.$refs.uForm.clearValidate(validateList)
				}, 10)
			},

			submit() {
				this.$refs.uForm.validate().then(res => {
					const formData = new FormData();
					let saveData = {
						mainData: this.model1.userInfo,
						delKeys: null,
						detailData: null
					}
					this.http.post("api/fwb_receive_info/updateData", saveData, true).then((s) => {
						if (s) {
							this.$toast("保存成功！");
							uni.navigateTo({
								url: "/pages/mytable/fwb_turnable_lottery/fwb_back"
							})
						} else {
							this.$toast("保存失败，请重新提交！");
						}
					})
				})
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	};
</script>

<style>
	.title {
		display: flex;
		justify-content: center;
		font-size: 36rpx;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
	}

	.formButton {
		margin-top: 40rpx;
		overflow-x: hidden;
		overflow-y: hidden;
		justify-content: space-around;
		align-items: center;
		display: flex !important;
		text-align: center;
		vertical-align: middle;
	}
</style>